<!doctype html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="Expires" content="0">
		<meta http-equiv="Pragma" content="no-cache">
		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
		<meta http-equiv="Cache" content="no-cache">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<title>WebSocket Test</title>
		<!-- <link rel="stylesheet" href="./css/main.css">
		<link rel="stylesheet" href="./css/fake-bs.css"> -->
	</head>
	<body style="margin: 0; background: cadetblue;">
		<h1>WebSocket Test</h1>
		<div class="main" style="margin: 10px;">
		<div class="container">
			<div>
				<div style="padding-top: 0px;">
					<h3>WebSocket Server</h3>
				</div>
				<div class="content">
					<input id="ws_addr" type="text" value="192.168.66.1" />
					<button id="button_connect">Connect</button>
				</div>
			</div>
			<div>
				<div>
					<h3>Commands</h3>
				</div>
				<div>
					<div>
						<button id="button_identity">Identity</button>
						<button id="button_reboot">Reset</button>
					</div>
					<div>
						<button id="button_save">Save</button>
					</div>
				</div>
				<div>
					<h4>WIFI & Internet</h4>
				</div>
				<div>
					<label for="wifi_ssid">SSID:</label>
					<input id="wifi_ssid" type="text" value="" />
				</div>
				<div>
					<label for="wifi_password">Password:</label>
					<input id="wifi_password" type="password" value="" />
				</div>
				<div>
					<button id="button_check_wifi">Check WIFI</button>
				</div>
				<div>
					<h4>MQTT Server</h4>
				</div>
				<div>
					<div>
						<label for="mqtt_host">Host:</label>
						<input id="mqtt_host" type="text" value="47.102.44.223" />
					</div>
					<div>
						<label for="mqtt_port">Port:</label>
						<input id="mqtt_port" type="text" value="1883" />
					</div>
					<div>
						<label for="mqtt_keepalive">KeepAlive:</label>
						<input id="mqtt_keepalive" type="text" value="120" />
					</div>
					<div>
						<label for="mqtt_username">Username:</label>
						<input id="mqtt_username" type="text" value="walkline" />
					</div>
					<div>
						<label for="mqtt_device_number">Device Number:</label>
						<input id="mqtt_device_number" type="text" value="24" />
					</div>
					<div>
						<label for="mqtt_device_authorize">Device Auth:</label>
						<input id="mqtt_device_authorize" type="password" />
					</div>
					<div>
						<label for="mqtt_device_name">Device Name:</label>
						<input id="mqtt_device_name" type="text" value="walkline_remote_wol" />
					</div>
					<div>
						<button id="button_check_mqtt">Check MQTT</button>
					</div>
				</div>
			</div>
		</div>
		</div>
		<div style="position: fixed; bottom: 0; background-color: wheat; width: 100%; height: 200px; overflow: auto;">
			<div>
				<div id="output" style="padding: 10px; color: forestgreen;"></div>
			</div>
		</div>
	</body>

	<script src="./js/index.js"></script>
</html>